<script setup>
	import { ref } from 'vue';
	import {onPullDownRefresh} from '@dcloudio/uni-app'
	const jokeText = ref('')
	
	const getJoke = async ()=>{
		uni.showLoading({title:'笑话加载中...'})
		const res = await uni.request({
			url:'https://api-vue-base.itheima.net/api/joke',
			method:'GET',
			data:{}
		})
		jokeText.value = res.data
		uni.hideLoading()
	}
	getJoke()
	const jokeList = ref([])
	const getJokeList = async ()=>{
		uni.showLoading({
			title:'笑话加载中...'
		})
		const res = await uni.request({
			method:'GET',
			url:'https://api-vue-base.itheima.net/api/joke/list',
			data:{num:3}
		})
		jokeList.value = res.data.data
		uni.hideLoading()
		
	}
	getJokeList()
	
	// 下拉刷新事件
	onPullDownRefresh(async()=>{
		uni.showNavigationBarLoading({})
		// await getJoke()
		// await getJokeList()
		Promise.all([getJoke(),getJokeList()])
		uni.hideNavigationBarLoading()
		uni.stopPullDownRefresh()
		// uni.hideLoading()
	})
</script>

<template>
	<view class="joke column">
		<image class="joke-image" src="../../static/entry4.png" mode=""></image>
		<text class="joke-text">{{jokeText}}</text>
		<button class="joke-button" v-if="jokeText" @click="getJoke()" type="primary">随机一个笑话</button>
		<button @click="getJokeList()" type="warn">获取笑话列表</button>
		<view v-if="jokeList.length>0" class="joke-list">
			<view class="joke-item" v-for="item in jokeList" :key="item">{{item}}</view>
		</view>
	</view>
</template>


<style lang="scss">
	.joke{
		padding: 20rpx;
		align-items: center;
		.joke-image{
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
		}
		.joke-button{
			background-color: $uni-color-primary;
		}
		.joke-item{
			// 排除最后一项
			&:not(:last-child){
				border-bottom: 1rpx solid #f60;
			}
			margin: 10rpx 0;
		}
	}
</style>
